<%
/**
 * Radio 组件 - 通用单选组件
 * @param {String} name - radio的name属性，必需
 * @param {Array} options - 选项数组，每个选项可以是字符串或对象 {value, label, disabled}
 * @param {String} value - 当前选中的值，可选
 * @param {String} layout - 布局方式，默认为 'horizontal' (horizontal|vertical)
 * @param {String} size - 尺寸，默认为 'md' (sm|md|lg)
 * @param {String} variant - 样式变体，默认为 'default' (default|card|button)
 * @param {Boolean} disabled - 是否禁用整个组件，默认false
 * @param {String} className - 额外的CSS类，可选
 * @param {String} id - 组件的id，可选
 * @param {String} onchange - 变化事件，可选
 * @param {String} label - 组件标签，可选
 * @param {Boolean} required - 是否必需，默认false
 */

const radioName = typeof name !== 'undefined' ? name : '';
const radioOptions = typeof options !== 'undefined' ? options : [];
const selectedValue = typeof value !== 'undefined' ? value : '';
const radioLayout = typeof layout !== 'undefined' ? layout : 'horizontal';
const radioSize = typeof size !== 'undefined' ? size : 'md';
const radioVariant = typeof variant !== 'undefined' ? variant : 'default';
const isDisabled = typeof disabled !== 'undefined' ? disabled : false;
const extraClass = typeof className !== 'undefined' ? className : '';
const radioId = typeof id !== 'undefined' ? id : '';
const changeHandler = typeof onchange !== 'undefined' ? onchange : '';
const radioLabel = typeof label !== 'undefined' ? label : '';
const isRequired = typeof required !== 'undefined' ? required : false;

// 尺寸配置
const sizeClasses = {
    sm: 'text-sm',
    md: 'text-sm',
    lg: 'text-base'
};

// 布局配置
const layoutClasses = {
    horizontal: 'flex flex-wrap gap-4',
    vertical: 'flex flex-col gap-3'
};

const currentSize = sizeClasses[radioSize] || sizeClasses.md;
const currentLayout = layoutClasses[radioLayout] || layoutClasses.horizontal;

// 标准化选项数组
const normalizedOptions = radioOptions.map(option => {
    if (typeof option === 'string') {
        return { value: option, label: option, disabled: false };
    }
    return {
        value: option.value || '',
        label: option.label || option.value || '',
        disabled: option.disabled || false
    };
});
%>

<div class="<%= extraClass %>" <% if (radioId) { %>id="<%= radioId %>"<% } %>>
    <% if (radioLabel) { %>
        <label class="block text-sm font-medium text-gray-700 mb-3">
            <%= radioLabel %>
            <% if (isRequired) { %><span class="text-red-500 ml-1">*</span><% } %>
        </label>
    <% } %>

    <div class="<%= currentLayout %> <%= currentSize %>">
        <% normalizedOptions.forEach((option, index) => { %>
            <%
                const isOptionDisabled = isDisabled || option.disabled;
                const isChecked = selectedValue === option.value;
                const inputId = `${radioName}_${index}`;
            %>

            <% if (radioVariant === 'default') { %>
                <!-- 默认样式 -->
                <label class="flex items-center cursor-pointer">
                    <input type="radio"
                           id="<%= inputId %>"
                           name="<%= radioName %>"
                           value="<%= option.value %>"
                           <% if (isChecked) { %>checked<% } %>
                           <% if (isOptionDisabled) { %>disabled<% } %>
                           <% if (changeHandler) { %>onchange="<%= changeHandler %>"<% } %>
                           <% if (isRequired) { %>required<% } %>
                           class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                    <span class="ml-3 text-gray-700">
                        <%= option.label %>
                    </span>
                </label>

            <% } else if (radioVariant === 'card') { %>
                <!-- 卡片样式 -->
                <label class="block cursor-pointer radio-card-container">
                    <input type="radio"
                           id="<%= inputId %>"
                           name="<%= radioName %>"
                           value="<%= option.value %>"
                           <% if (isChecked) { %>checked<% } %>
                           <% if (isOptionDisabled) { %>disabled<% } %>
                           <% if (changeHandler) { %>onchange="<%= changeHandler %>"<% } %>
                           <% if (isRequired) { %>required<% } %>
                           class="sr-only">
                    <div class="flex items-center p-4 border-2 border-gray-200 rounded-lg transition-all duration-200 radio-card-content">
                        <span class="text-gray-700 flex-1">
                            <%= option.label %>
                        </span>
                        <i class="fas fa-check text-blue-500 ml-auto radio-card-check" style="display: none;"></i>
                    </div>
                </label>

            <% } else if (radioVariant === 'button') { %>
                <!-- 按钮样式 -->
                <label class="cursor-pointer radio-button-container">
                    <input type="radio"
                           id="<%= inputId %>"
                           name="<%= radioName %>"
                           value="<%= option.value %>"
                           <% if (isChecked) { %>checked<% } %>
                           <% if (isOptionDisabled) { %>disabled<% } %>
                           <% if (changeHandler) { %>onchange="<%= changeHandler %>"<% } %>
                           <% if (isRequired) { %>required<% } %>
                           class="sr-only">
                    <span class="inline-flex items-center px-4 py-2 border-2 border-gray-300 rounded-lg text-gray-700 transition-all duration-200 radio-button-content">
                        <%= option.label %>
                    </span>
                </label>
            <% } %>
        <% }) %>
    </div>
</div>

<% if (radioVariant === 'card' || radioVariant === 'button') { %>
    <script>
        function handleRadioChange(radio) {
            const radioName = radio.name;
            const allRadios = document.querySelectorAll(`input[name="${radioName}"]`);

            allRadios.forEach(function(r) {
                const label = r.closest('label');
                const content = label.querySelector('.radio-card-content');
                const check = label.querySelector('.radio-card-check');

                if (content) {
                    // Card样式
                    if (r.checked) {
                        content.className = 'flex items-center p-4 border-2 border-blue-500 bg-blue-50 rounded-lg transition-all duration-200 radio-card-content';
                        if (check) check.style.display = 'block';
                    } else {
                        content.className = 'flex items-center p-4 border-2 border-gray-200 rounded-lg transition-all duration-200 radio-card-content hover:border-blue-300 hover:bg-blue-50';
                        if (check) check.style.display = 'none';
                    }
                }

                const buttonContent = label.querySelector('.radio-button-content');
                if (buttonContent) {
                    // Button样式
                    if (r.checked) {
                        buttonContent.className = 'inline-flex items-center px-4 py-2 border-2 border-blue-500 bg-blue-500 text-white rounded-lg transition-all duration-200 radio-button-content';
                    } else {
                        buttonContent.className = 'inline-flex items-center px-4 py-2 border-2 border-gray-300 rounded-lg text-gray-700 transition-all duration-200 radio-button-content hover:border-blue-300 hover:bg-blue-50';
                    }
                }
            });
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            const allRadios = document.querySelectorAll('input[type="radio"]');
            allRadios.forEach(function(radio) {
                const label = radio.closest('label');
                if (label && (label.querySelector('.radio-card-content') || label.querySelector('.radio-button-content'))) {
                    radio.addEventListener('change', function() {
                        handleRadioChange(this);
                    });
                    // 初始化状态
                    handleRadioChange(radio);
                }
            });
        });
    </script>
<% } %>